<template>
  <div style="font-size: 14px;" class="detail">
    <div class="nav">
      <div class="nav_con">
        <a @click="homePage">首页 </a>&gt; 商品详情 &gt; {{product.productName}}
        <a class="go-to-customer-service-wrap">
          <div class="gtcs">
            <span>联系客服</span>
            <img src="https://p4.lefile.cn/product/adminweb/2019/08/14/4467e513-fa34-4081-bbc3-05390e1196e3.png" class="origin">
            <img src="https://p1.lefile.cn/product/adminweb/2019/08/14/8509f29b-a8a8-40a8-9f2f-e0880f1be377.png">
          </div>
        </a>
      </div>
    </div>

    <div class="con clearfix" id="detail_main">
      <div class="con_left" id="detail_left">
        <!--橱窗图-->
        <el-image id="winpic" v-if="defaultImg" :src="defaultImg" class="pic" :preview-src-list="product.imgList"></el-image>
        <div class="play-picture" id="detail_playPicture" style="display: block;">
          <a class="left-button" id="play_picture_leftbtn" style="opacity: 1;">
            <div class="triangle-wrap">
              <div id="triangle-left" @click="moveImgLeft"></div>
              <div id="triangle-left1" @click="moveImgLeft"></div>
            </div>
          </a>
          <a class="right-button" id="play_picture_rightbtn" style="opacity: 1;">
            <div class="triangle-wrap">
              <div id="triangle-right" @click="moveImgRight"></div>
              <div id="triangle-right1" @click="moveImgRight"></div>
            </div>
          </a>
          <div class="list" id="detail_playPicture_list">
            <ul :style="'margin-left:'+marginLeft+'px'">
              <li v-for="(item,index) in product.imgList" :key="index" :class="defaultImg===item?'checked':''" @mouseover="selImg(item)">
                <a href="javascript:;">
                  <img :src="item" :alt="product.productName">
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="good_action">
          <span class="good_code">商品编号：<span>82WK00D8CD</span></span>
          <div id="div_share" class="good-do">
            <a id="a_share">
              <span class="share_icon"></span>
              <span class="share-txt">分享</span>
            </a>

          </div>
          <div id="div_sc" class="good-do">
            <a id="a_sc" href="javascript:void(0);">
              <span class="bg collect_img"></span>
              <span class="collect">收藏</span>
            </a>
          </div><div id="div_goodsComapre" class="good-do"><a id="a_goodsCompare" href="javascript:void(0);"><span class="compare-icon"></span><span class="compare-txt">对比</span></a></div>
        </div>
      </div>

      <div class="con_right" id="detail_right">
        <div>
          <h1 :title="product.productName" class="title" id="span_product_name">
            {{product.productName}}
          </h1>
        </div>
        <div class="dec" id="div_product_dec">
          {{product.des}}
        </div>
        <div>
          <!-- 促销语样式优化 -->
          <div class="cxy_content">
            <div class="cxy_brief">支持配置&amp;外观双定制</div>
            <div class="cxy_more">更多&gt;</div>
          </div>
          <!--价格区域-->
          <div class="price-area">
            <!--价格及评价总数-->
            <div class="price-detail-wrap">
              <div class="prc-container">
                <div class="price-desc" style="color: rgb(67, 66, 66);">商城价</div>
                <div class="sign-prc-group">
                  <span class="price-sign">¥</span>
                  <span class="price-show" id="span_price">{{product.price}}</span>
                </div>
              </div>
              <div class="total-evaluate-wrap-contanier">
                <div id="price-reminder-btn" class="price-reminder">
                  <div>降价</div>
                  <div>通知</div>
                </div>
                <div class="total-evaluate-wrap">
                  <div class="total-evaluate-desc">累计评价</div>
                  <div id="total-evaluate-count">881</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="business-staff-container clearfix" id="container_guige">
            <ul id="guige">
              <li class="guige-li clearfix" id="guigeitem1">
                <div class="guige-item-title">操作系统</div>
                <div class="guige-item-detail">
                  <span v-for="(item,index) in systems" :key="index" :title="item.name" :class="'spec-big '+(systemId===item.id?'active':'')" @click="systemId=item.id">
                    <i>{{item.name}}</i>
                  </span>
                </div>
              </li>
              <li class="guige-li clearfix" id="guigeitem0">
                <div class="guige-item-title">处理器/颜色</div>
                <div class="guige-item-detail">
                  <span v-for="(item,index) in colors" :key="index" :title="item.name" :class="'spec-big '+(colorId===item.id?'active':'')" @click="colorId=item.id">
                    <i>{{item.name}}</i>
                  </span>
                </div>
              </li>
              <li class="guige-li clearfix" id="guigeitem2">
                <div class="guige-item-title">内存/硬盘</div>
                <div class="guige-item-detail">
                 <span v-for="(item,index) in caches" :key="index" :title="item.name" :class="'spec-big '+(cacheId===item.id?'active':'')" @click="cacheId=item.id">
                    <i>{{item.name}}</i>
                  </span>
                </div>
              </li>
              <li class="guige-li clearfix" id="guigeitem3">
                <div class="guige-item-title">显卡</div>
                <div class="guige-item-detail">
                  <span v-for="(item,index) in cards" :key="index" :title="item.name" :class="'spec-big '+(cardId===item.id?'active':'')" :disabled="item.disabled" @click="cardId=item.id">
                    <i>{{item.name}}</i>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="business-staff-container clearfix" id="container_purchase_count">
          <div class="business-title">购买数量</div>
          <div class="business-detail modify-buy-counts">
            <div class="add-count-wrap" id="addcountbox">
              <!--<span class="operate_stock" id="span_stock_dec"></span>-->
              <span class="reduce" id="reduce_buy_number" @click="subNum">
                <i class="buy-count-plus"></i>
            </span>
              <input type="text" class="txt" id="buy_number" v-model="buyNum">
              <span class="add" id="add_buy_number" @click="addNum">
                <i class="buy-count-minus"></i>
            </span>
            </div>
            <div class="delivery-info-wrap" style="display: none;">
              <span class="delivery-txt">发货说明</span>
              <i class="question-mark"></i>
            </div>
          </div>
        </div>
        <div class="business-staff-container clearfix">
          <div class="business-title">&nbsp;</div>
          <div class="business-detail">
            <div id="div_button_group">
              <div class="button-pay" id="ljgm" style="" title="立即购买" @click="toPay">立即购买</div>
              <div class="button-add" id="jrgwc" style="" @click="cartPage">加入购物车</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="container_info">
      <div class="info-box" id="box_information">
        <div class="padding-top"></div>
        <div class="images">
          <p>
            <img v-for="(item,index) in product.detailImgList" :key="index" :src="item">
          </p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import data from '@/data/data.js';
  export default {
    data() {
      return {
        product: {},//商品
        defaultImg:'',//默认大图
        marginLeft: 0,
        moreMarginLeft: 0,
        buyNum: 1,//购买数量
        systemId: 1,
        systems:[
          {id: 1,name:'Windows 11 家庭中文版'},
          {id: 2,name:'Windows 10 家庭英文版'}
        ],
        colorId: 1,
        colors:[
          {id: 1,name:'i9-13900HX/冰魄白'},
          {id: 2,name:'i9-13900HX/星钻黑'}
        ],
        cacheId: 3,
        caches:[
          {id: 1,name:'16G（8*2）/1T'},
          {id: 2,name:'16G (8*2) /2T (1T+1T) SSD'},
          {id: 3,name:'32G (16*2) /2T (1T+1T) SSD'}
        ],
        cardId: 4,
        cards:[
          {id: 1,name:'【官方标配】RTX 4060 8G',disabled: true},
          {id: 2,name:'【官方标配】RTX 4070 8G',disabled: true},
          {id: 3,name:'【官方定制】RTX 4070 8G'},
          {id: 4,name:'【官方定制】RTX 4060 8G'}
        ],
      };
    },
    mounted() {
      let id = this.$route.query.id;
      data.products.forEach(item=>{
        if(item.id == id){
          this.product = item;
          this.defaultImg = item.imgList[0];
          //计算图片左右移动距离
          let num = item.imgList.length;
          let more = item.imgList.length % 5;
          if(more !== 0){
            num += (5-more);
          }
          num -= 5;
          this.moreMarginLeft = -(num/5 * 480);
        }
      })
    },
    methods: {
      homePage(){//首页
        this.$router.push({path:'/'});
      },
      cartPage(){//购物车
        this.$router.push({path:'/cart'});
      },
      selImg(img){//切换图片
        this.defaultImg = img;
      },
      moveImgLeft(){//左移图片
        if(this.marginLeft < 0){
          this.marginLeft += 480;
        }
      },
      moveImgRight(){//右移图片
        console.info(this.marginLeft);
        if(this.marginLeft > this.moreMarginLeft){
          this.marginLeft += -480;
        }
      },
      subNum(){//数量减
        let num = this.buyNum;
        if(num>1){
          num-=1
        }
        this.buyNum=num;
      },
      addNum(){//数量加
        this.buyNum += 1;
      },
      //结算
      toPay() {
        let value = this.product.id + '_' + this.buyNum;
        this.$router.push({
          path:'/pay',
          query:{
            value: value
          }
        })
      },
    }
  };
</script>

<style scoped>
  .detail .nav {
    width: 100%;
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #DADADA;
  }
  .detail .nav .nav_con {
    width: 1200px;
    margin: 0 auto;
    font-size: 12px;
    color: #535353;
  }
  a {
    color: #333;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
  }
  .detail .nav .nav_con .go-to-customer-service-wrap {
    float: right;
    font-size: 0;
  }
  .detail .nav .nav_con .go-to-customer-service-wrap .gtcs {
    position: relative;
    width: 99px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    vertical-align: middle;
  }
  .detail .nav .nav_con .go-to-customer-service-wrap .gtcs span {
    margin-left: 36px;
    font-size: 12px;
    vertical-align: middle;
    color: #fff;
    position: relative;
    z-index: 1;
  }
  .detail .nav .nav_con .go-to-customer-service-wrap .gtcs img {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .detail .nav .nav_con .go-to-customer-service-wrap .gtcs .origin {
    display: inline;
  }

  #detail_main {
    position: relative;
    width: 1200px;
    margin: 0 auto 0;
    height: auto;
    padding-bottom: 40px;
  }
  .clearfix {
    zoom: 1;
  }
  #detail_main .con_left {
    position: relative;
    width: 520px;
    float: left;
  }
  #detail_main .con_left .pic {
    width: 520px;
    height: 520px;
  }
  img {
    border: none;
  }
  #detail_playPicture {
    position: relative;
    overflow: hidden;
    width: 530px;
    display: none;
    margin-top: 20px;
  }
  #detail_playPicture a.left-button, #detail_playPicture a.right-button {
    line-height: 86px;
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 86px;
    top: 0;
    cursor: pointer;
  }
  #detail_playPicture .triangle-wrap {
    position: absolute;
    width: 12px;
    height: 20px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #detail_playPicture .triangle-wrap #triangle-left {
    border-top: 10px solid transparent;
    border-right: 12px solid #A5A5A5;
    border-bottom: 10px solid transparent;
  }
  #detail_playPicture .triangle-wrap #triangle-left1 {
    top: 0;
    left: 3px;
    position: absolute;
    width: 0;
    border-top: 10px solid transparent;
    border-right: 12px solid #ffffff;
    border-bottom: 10px solid transparent;
  }
  #detail_playPicture a.right-button {
    right: 3px;
  }
  #detail_playPicture a.left-button, #detail_playPicture a.right-button {
    line-height: 86px;
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 86px;
    top: 0;
    cursor: pointer;
  }
  #detail_playPicture #detail_playPicture_list {
    height: 88px;
    width: 470px;
    margin-left: 20px;
    overflow: hidden;
    background-color: #ffffff;
    position: relative;
    left: 8px;
  }
  #detail_playPicture #detail_playPicture_list ul {
    width: 10000px;
    height: 88px;
    position: absolute;
    left: 0;
    top: 0;
    transition: .5s .2s all ease;
  }
  ul,li {
    list-style: none;
  }
  #detail_playPicture #detail_playPicture_list ul li {
    float: left;
    height: 86px;
    display: block;
    border: 1px solid #dcdcdc;
    cursor: pointer;
    margin-right: 10px;
  }
  #detail_playPicture #detail_playPicture_list ul li a {
    display: block;
    width: 84px;
    height: 84px;
  }
  a {
    color: #333;
    text-decoration: none;
    outline: 0;
  }
  #detail_playPicture #detail_playPicture_list ul li img {
    border: 0;
    width: 84px;
    height: 84px;
  }
  #detail_playPicture #detail_playPicture_list ul li.checked {
    border-color: #e2231a;
  }
  #detail_main .con_left .good_action {
    font-size: 13px;
    margin-top: 5px;
    position: relative;
    height: 30px;
    line-height: 30px;
    width: 530px;
  }
  #detail_main .con_left .good_action .good_code {
    color: #A5A5A5;
    font-size: 11px;
    display: block;
    position: absolute;
    top: 0;
    right: 340px;
    height: 30px;
    line-height: 30px;
  }
  #detail_main .con_left .good_action .good_code {
    right: auto;
    left: 0;
  }
  #detail_main .con_left #div_share {
    right: 0px;
  }
  #detail_main .con_left .good-do {
    display: inline-block;
    cursor: pointer;
    float: right;
    top: 0;
  }
  #div_share {
    height: 30px;
  }
  #detail_main .con_left #div_share #a_share {
    display: inline-block;
  }
  #detail_main .con_left #div_share #a_share .share_icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    background-image: url(../../../public/img/small-icons.png);
    background-position: -55px -42px;
  }
  #detail_main .con_left #div_share #a_share .share-txt {
    font-size: 11px;
  }
  #detail_main .con_left #div_sc {
    right: 57px;
    margin-right: 10px;
  }
  #detail_main .con_left .good-do {
    display: inline-block;
    cursor: pointer;
    float: right;
    top: 0;
  }
  #detail_main .con_left .collect_img {
    width: 10px;
    height: 10px;
    float: left;
    margin: 10px 6px 0 10px;
  }
  .detail .bg {
    background-image: url(../../../public/img/small-icons.png);
    background-repeat: no-repeat;
    background-position: -39px -43px;
    display: inline-block;
  }
  #detail_main .con_left .collect {
    font-size: 11px;
  }
  #detail_main .con_left .good-do {
    display: inline-block;
    cursor: pointer;
    float: right;
    top: 0;
  }
  #div_goodsComapre .compare-icon {
    width: 18px;
    height: 11px;
    float: left;
    margin: 10px 5px 0 15px;
    background: url(../../../public/img/ruiuqe76fyvlru2e8d4omwdhducxpz300545.png) no-repeat center;
    background-size: contain;
  }
  #div_goodsComapre .compare-txt {
    font-size: 12px;
  }
  .clearfix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    content: "";
  }
  ul,li{
    margin: 0;
    padding: 0;
  }
  #detail_playPicture a.right-button {
    right: 3px;
  }
  #detail_playPicture a.right-button #triangle-right {
    border-top: 10px solid transparent;
    border-left: 12px solid #A5A5A5;
    border-bottom: 10px solid transparent;
  }
  #detail_playPicture a.right-button #triangle-right1 {
    top: 0;
    left: -3px;
    position: absolute;
    width: 0;
    border-top: 10px solid transparent;
    border-left: 12px solid #ffffff;
    border-bottom: 10px solid transparent;
  }

  #detail_main .con_right {
    position: relative;
    margin-top: 36px;
    width: 642px;
    float: right;
    color: #000000;
  }
  #detail_main .con_right .title {
    font-size: 22px;
    font-weight: normal;
  }
  #span_product_name {
    width: 100%;
    word-break: break-all;
  }
  #span_product_name {
    overflow: hidden;
  }
  .detail h1{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    box-sizing: border-box;
  }
  #detail_main .con_right .dec {
    color: #A2A2A2;
    font-size: 14px;
    margin-top: 8px;
    line-height: 22px;
    word-break: break-all;
    margin-bottom: 20px;
  }
  .cxy_content {
    height: 16px;
    margin-bottom: 16px;
  }
  .cxy_content .cxy_brief {
    max-width: calc(100% - 40px);
    font-size: 13px;
    color: #E1140A;
    line-height: 16px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
  }
  .cxy_content .cxy_more {
    font-size: 12px;
    color: #3E8DDD;
    text-align: right;
    line-height: 12px;
    font-weight: 400;
    float: left;
    cursor: pointer;
    border-bottom: 1px solid #3E8DDD;
    margin-top: 2px;
    margin-left: 5px;
  }
  #detail_main .con_right .price-area {
    background: #F9F9F9;
    border: 1px solid #F0F0F0;
  }
  #detail_main .con_right .price-area .price-detail-wrap {
    position: relative;
    height: 38px;
    margin-top: 9px;
  }
  #detail_main .con_right .price-area .price-detail-wrap .prc-container {
    position: absolute;
    padding-left: 15px;
    line-height: 42px;
    top: -3px;
  }
  #detail_main .con_right .price-area .price-detail-wrap .prc-container .price-desc {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.8px;
    margin-right: 35px;
    height: 42px;
    width: 45px;
  }
  #detail_main .con_right .price-area .price-detail-wrap .prc-container .sign-prc-group {
    display: inline-block;
    height: 42px;
  }
  #detail_main .con_right .price-area .price-detail-wrap .prc-container .sign-prc-group .price-sign {
    font-size: 12px;
    color: #E1140A;
    font-weight: bold;
  }
  #detail_main .con_right .price-area .price-detail-wrap .prc-container .sign-prc-group .price-show {
    font-weight: bold;
    font-size: 27px;
    color: #E1140A;
  }
  #detail_main .con_right .price-area .price-detail-wrap .total-evaluate-wrap-contanier {
    position: absolute;
    right: 0;
    height: 35px;
  }
  #detail_main .con_right .price-area .price-detail-wrap .total-evaluate-wrap-contanier .price-reminder {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: #3E8DDD;
    background: #F9F9F9;
    border: 1px solid #dae6f2;
    border-radius: 4px;
    margin-right: 10px;
    height: 35px;
    width: 35px;
    text-align: center;
    box-sizing: border-box;
    padding: 3px 0px;
    line-height: 13px;
    user-select: none;
  }
  #detail_main .con_right .price-area .price-detail-wrap .total-evaluate-wrap-contanier .total-evaluate-wrap {
    display: inline-block;
    vertical-align: middle;
    height: 35px;
    border-left: 1px solid #E0E0E0;
    top: 2px;
    padding: 0 22px;
  }
  #detail_main .con_right .price-area .price-detail-wrap .total-evaluate-wrap-contanier .total-evaluate-wrap .total-evaluate-desc {
    font-size: 12px;
    color: #A5A5A5;
  }
  #detail_main .con_right .price-area .price-detail-wrap .total-evaluate-wrap-contanier .total-evaluate-wrap #total-evaluate-count {
    font-size: 12px;
    color: #4A4A4A;
    cursor: pointer;
  }
  #detail_main .con_right .business-staff-container {
    margin: 15px 0 0 0;
    color: #434242;
  }
  .clearfix {
    zoom: 1;
  }
  #detail_main .con_right .business-staff-container #guige {
    font-size: 12px;
    margin-bottom: -8px;
  }
  .detail ul,.detail li{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    box-sizing: border-box;
  }
  .clearfix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    content: "";
  }
  #detail_main .con_right .business-staff-container #guige .guige-li {
    padding-left: 20px;
  }
  #detail_main .con_right #container_guige #guige li.guige-li .guige-item-title {
    line-height: 16px;
    margin-top: 3px;
  }
  #detail_main .con_right .business-staff-container #guige .guige-li .guige-item-title {
    float: left;
    margin-right: 20px;
    width: 58px;
  }
  #detail_main .con_right .business-staff-container #guige .guige-li .guige-item-detail {
    float: left;
    width: 537px;
  }

  #detail_main .con_right .business-staff-container #guige .guige-li .guige-item-detail .spec-big {
    display: inline-block;
    width: 200px;
    padding: 0px 21px;
    height: 23px;
    border: 1px solid #DADADA;
    text-align: center;
    line-height: 23px;
    cursor: pointer;
    margin: 5px 10px 5px 0;
  }
  #detail_main .con_right .business-staff-container #guige .guige-li .guige-item-detail .active {
    color: #E1140A;
    border: 1px solid #E1140A;
  }
  i {
    font-style: normal;
  }
  #detail_main .con_right .business-staff-container #guige .guige-li .guige-item-detail .down_line {
    color: #999999;
  }
  #detail_main .con_right .business-staff-container {
    margin: 15px 0 0 0;
    color: #434242;
  }
  #detail_main .con_right #container_purchase_count .business-title {
    line-height: 26px;
  }
  #detail_main .con_right .business-staff-container .business-title {
    float: left;
    width: 58px;
    margin-right: 20px;
    margin-left: 20px;
  }
  #detail_main .con_right .business-staff-container .modify-buy-counts {
    height: 26px !important;
    line-height: 24px !important;
    font-size: 0;
  }
  #detail_main .con_right .business-staff-container .business-detail {
    position: relative;
    float: left;
  }
  #detail_main .con_right .business-staff-container .add-count-wrap {
    width: 92px;
    border: 1px solid #DADADA;
    display: inline-block;
    line-height: 24px;
  }
  #detail_main .con_right .business-staff-container .add-count-wrap .reduce {
    display: inline-block;
    width: 20px;
    height: 24px;
    line-height: 24px;
    border-right: 1px solid #DADADA;
    text-align: center;
    cursor: pointer;
  }
  #detail_main .con_right .business-staff-container .add-count-wrap .reduce .buy-count-plus {
    display: inline-block;
    width: 14px;
    height: 2px;
    background-image: url(../../../public/img/small-icons.png);
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: -71px -48px;
  }
  #detail_main .con_right .business-staff-container .add-count-wrap .txt {
    width: 50px;
    border: none;
    text-align: center;
    vertical-align: middle;
  }
  #detail_main .con_right .business-staff-container .add-count-wrap .add {
    display: inline-block;
    width: 20px;
    height: 24px;
    line-height: 24px;
    border-left: 1px solid #DADADA;
    text-align: center;
    cursor: pointer;
  }
  #detail_main .con_right .business-staff-container .add-count-wrap .add .buy-count-minus {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(../../../public/img/small-icons.png);
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: -90px -44px;
  }
  #detail_main .con_right .business-staff-container .delivery-info-wrap {
    margin-left: 20px;
    color: #A5A5A5;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
  }
  #detail_main .con_right .business-staff-container {
    margin: 15px 0 0 0;
    color: #434242;
  }
  #detail_main .con_right .business-staff-container .business-title {
    float: left;
    width: 58px;
    line-height: 30px;
    margin-right: 20px;
    margin-left: 20px;
  }
  #detail_main .con_right .business-staff-container .business-detail {
    position: relative;
    float: left;
    height: 30px;
    line-height: 30px;
  }
  #detail_main .con_right .business-staff-container #div_button_group .button-pay {
    width: 130px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    color: #FFFFFF;
    background-color: #E1140A;
    text-align: center;
    font-size: 15px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #E1140A;
    vertical-align: middle;
  }
  #detail_main .con_right .business-staff-container #div_button_group .button-pay {
    width: 130px;
    height: 36px;
    line-height: 36px;
    color: #FFFFFF;
    background-color: #E1140A;
    text-align: center;
    font-size: 15px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #E1140A;
    vertical-align: middle;
  }
  #detail_main .con_right .business-staff-container #div_button_group .button-add {
    width: 130px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #E1140A;
    display: inline-block;
    background-color: #FFEDED;
    text-align: center;
    color: #E1140A;
    font-size: 15px;
    margin-right: 10px;
    cursor: pointer;
    vertical-align: middle;
  }
  .detail input{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    box-sizing: border-box;
  }
  .container_info {
    margin: 0 auto 0 auto;
    position: relative;
  }
  .container_info #box_information {
    text-align: center;
    overflow: hidden;
  }
  .container_info .info-box {
    left: 0;
    right: 0;
  }
  .container_info .info-box div.padding-top {
    height: 10px;
  }
  .container_info #box_information div.images {
    overflow: hidden;
  }
  #box_information img{
    max-width: 100%;
  }
  .detail p{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    box-sizing: border-box;
  }
  .container_info #box_information img {
    display: block;
    box-sizing: border-box;
    width: 1920px;
    position: relative;
    left: 50%;
    margin-left: -960px;
  }
  img {
    border: none;
  }
</style>
